<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Aanmeldapplicatie</title>
<!--[if lt IE 9]>
	<script src="js/html5.js"></script>
<![endif]-->
<link href="css/style.css" rel="stylesheet" media="screen" type="text/css">
<link href="css/print.css" rel="stylesheet" media="print" type="text/css">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
</head>

<body>
<div id="page">
<!-- header on -->
<header class="gl-header">
  <div class="gl-inner cf">
  	<h1 class="bl-hd-school">Annie M.G. Schmidtschool</h1>
    <div class="bl-hd-location">
    	<select>
      	<option value="1">De Graaflaan</option>
        <option value="2">Van Hoornbeekstraat</option>
        <option value="3">Doedijnstraat</option>
      </select>
    </div>
    <dl class="bl-hd-user">
    	<dt>andre.jilderda@angistudio.com</dt>
      <dd class="el-mail"><a href="#" title="Correspondentie">Correspondentie</a></dd>
      <dd><a href="#" title="Instellingen">Instellingen</a></dd>
      <dd><a href="#" title="Uitloggen">Uitloggen</a></dd>
    </dl>
  </div>
</header>
<!-- header off -->
<!-- content on -->
<div class="gl-tabs">
	<div class="gl-inner cf">
  	<ul class="bl-ls-tabs">
      <li class="el-active"><a href="#" title="Overzicht">Overzicht</a></li>
      <li><a href="#" title="2016/2017">2016<span>/</span>2017</a></li>
      <li><a href="#" title="2017/2018">2017<span>/</span>2018</a></li>
    </ul>
    <div class="bl-ls-search">
    	<p><a class="el-modal" href="#" title="Kind zoeken of aanmelden"><span>Kind zoeken <em>of</em> aanmelden</span></a></p>
      <div class="bl-sh-modal">
        <div class="bl-sh-form">
        	<form action="include/search-result.json">
            <div class="un-form-bsn" data-radio-id="type_bsn">
              <div class="cf">
                <p class="un-col">
                  <label>Vul BSN in.</label>
                  <input type="text" id="code_bsn" value="">
                  <button class="el-btn-orange" type="submit"><span>Ga</span></button>
                </p>
              </div>
            </div>
            <div class="un-form-name" data-radio-id="type_name">
              <div class="cf">
                <p class="un-col">
                  <label>Achternaam</label>
                  <input class="el-small" type="text" id="code_name" value="">
                </p>
                <p class="un-col">
                  <label>Geboortedatum</label>
                  <input class="el-small" type="text" value="">
                  <button class="el-btn-orange" type="submit"><span>Ga</span></button>
                </p>
              </div>
            </div>
            <ul class="un-form-type cf">
              <li><input type="radio" name="type_zoek" id="type_bsn" /><label for="type_bsn">BSN</label></li>
              <li><input type="radio" name="type_zoek" id="type_name" /><label for="type_name">Achternaam, geboortedatum</label> </li>
              <li><a class="el-help" data-position="e" href="#tip_zoek"></a></li>
            </ul>
            <!-- tooltip content on -->
            <div class="un-tip-data" id="tip_zoek">
              <h4>Zoek kind</h4>
              <p>In GBA staan gegevens van kinderen van 1-jarige leeftijd. Om een kind aan te melden, wijzigen of af te melden kunt u een kind vinden op BSN of briefcode. Als alternatief kunt ook op achternaam en geboortedatum zoeken. Als een kind niet gevonden wordt kunt u deze alsnog  aanmelden.</p>
            </div>
            <!-- tooltip content off -->
          </form>
        </div>
        <div class="bl-sh-info">
          <h4>Kinderen buiten Den Haag of zonder BSN</h4>
          <p>Soms kunt u een kind niet vinden. Bijvoorbeeld als een kind buiten Den Haag woont of geen BSN heeft. In dit geval kunt u de gegevens handmatig invoeren op een lege kindkaart.</p>
          <p><a href="#" title="Een kind handmatig invoeren">Een kind handmatig invoeren</a></p>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="gl-def">
	<div class="gl-inner cf">
    <section class="bl-db">
    	<h2>Kinderen per schooljaar</h2>
      <div class="un-db-row three cf">
      	<article>
        	<div class="un-db-ttl">
        		<h3>2016 <span>/</span> 2017</h3>
            <p>31 plekken</p>
          </div>
          <div class="un-db-data">
          	<ul>
            	<li class="el-true"><a href="#" title="3 toelatingen">3 toelatingen</a></li>
              <li class="el-false"><a href="#" title="1 afwijzing">1 afwijzing</a></li>
            </ul>
          </div>
          <div class="un-db-btm">
          	<p>leerlingenplafond: 35</p>
            <p><a class="el-comment" href="#" title="uitleg">uitleg</a></p>
          </div>
          <div class="un-db-tooltip">
          	<p>Kinderen geboren tussen <strong>1 oktober 2012 en 1 oktober 2013</strong></p>
          </div>
        </article>
        <article>
        	<div class="un-db-ttl">
        		<h3>2017 <span>/</span> 2018</h3>
          </div>
          <div class="un-db-data">
          	<h4>0 aanmeldingen</h4>
            <p>Voor 2017/2018 kunt u alleenkinderen aanmelden.</p>
            <p>De toelatingsperiode begint op <strong>1 oktober 2015</strong></p>
          </div>
          <div class="un-db-btm">
          	<p>leerlingenplafond: 35</p>
            <p><a class="el-comment" href="#" title="uitleg">uitleg</a></p>
          </div>
          <div class="un-db-tooltip">
          	<p>Kinderen geboren tussen <strong>1 oktober 2012 en 1 oktober 2013</strong></p>
          </div>
        </article>
        <article class="future">
        	<div class="un-db-ttl">
        		<h3>2018 <span>/</span> 2019</h3>
          </div>
          <div class="un-db-data">
            <p>Voor 2017/2018 kunt u kinderen aanmelden vanaf <strong>1 oktober 2015</strong></p>
          </div>
          <div class="un-db-btm"></div>
        </article>
      </div>
      <p class="el-info">Kinderen geboren voor <strong>1 oktober 2012</strong> kunt u niet aanmelden in de aanmeldapplicatie</p>
    </section>
  </div>
</div>
<!-- content off -->
<!-- footer on -->
<footer class="gl-footer">
	<div class="gl-inner cf">
    <ul class="bl-ft-nav">
      <li><a href="#" title="Handleiding">Handleiding</a></li>
      <li><a href="#" title="Helpdesk">Helpdesk</a></li>
      <li class="el-external"><a href="#" title="Meer informatie">Meer informatie</a></li>
    </ul>
    <div class="bl-ft-logos">
    	<p>Initiatief van de gemeente Den Haag en het Platform Primair Onderwijs.</p>
      <figure><a href="#" title="Den Haag"><img src="images/ft-logo-dh.gif" alt="Den Haag"></a></figure>
      <figure><a href="#" title="PPO"><img src="images/ft-logo-ppo.gif" alt="PPO"></a></figure>
    </div>
  </div>
</footer>
<!-- footer off -->
</div>
<script src="js/jq.core.js"></script>
<script src="js/jq.function.js"></script>
</body>
</html>
